<template>
  <div class="recharge-container">
    <ResponsiveNav />
    <div class="header-placeholder"></div>

    <div class="recharge-page">
      <!-- 面包屑导航区域 -->
      <div class="page-nav">
        <div class="breadcrumb">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/assets' }">
              <i class="fas fa-arrow-left"></i> {{ $t('返回资产') }}
            </el-breadcrumb-item>
            <el-breadcrumb-item>{{ $t('加密货币充值') }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="divider"></div>
      </div>

      <!-- 页面标题 -->
      <div class="page-header">
        <h1>{{ $t('加密货币充值') }}</h1>
      </div>

      <!-- 币种选择卡片 -->
      <div class="crypto-card">
        <div class="card-header">
          <h2>{{ $t('选择充值币种') }}</h2>
        </div>
        <div class="crypto-list">
          <div
            v-for="v in cryptoList"
            :key="v.symbol"
            :class="['crypto-item', { active: selectedCrypto === v.coin }]"
            @click="selectCrypto(v)"
          >
            <div class="coin-info">
              <span class="symbol">{{ v.coin }}</span>
              <span class="name">{{ $t('费率') }}:{{ v.rechargeRate.rate }}</span>
            </div>
            <div class="network-info">
              <span class="label">{{ $t('支持网络') }}</span>
              <span class="networks">{{ $t('单笔限制') }}:{{ v.rechargeRate.limitAmount }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 充值信息卡片 -->
      <div class="deposit-card">
<!--        <div class="card-header">-->
<!--          <h2>{{ $t('充值数量') }}</h2>-->
<!--        </div>-->
        <el-form class="deposit-form" label-position="top">
          <el-form-item :label="$t('充值地址')">
            <div class="address-container">
              <div class="address-content">
                <el-input
                  v-model="depositAddress"
                  :placeholder="$t('请选择充值币种')"
                  size="large"
                  disabled
                >
                <template #append>
                    <el-button @click="copyAddress(depositAddress)">
                      <i class="far fa-copy"></i> {{$t('复制')}}
                    </el-button>
                  </template>
                </el-input>
              </div>
            </div>
          </el-form-item>
          <el-form-item :label="$t('充值数量')">
            <div class="address-container">
              <div class="address-content">
                <el-input
                  v-model="depositNum"
                  :placeholder="$t('请输入充值数量')"
                  type="number"
                  size="large"
                >
                </el-input>
              </div>
            </div>
          </el-form-item>
          <el-form-item :label="$t('充值地址')">
            <div class="address-container">
              <div class="qr-section">
                <el-image 
                  :src="`https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${depositAddress}`"
                  class="qr-code"
                  fit="contain"
                />
                <span class="scan-tip">{{$t('扫描二维码进行转账')}}</span>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
      

      <!-- 充值信息卡片 -->
      <div class="deposit-card">
        <div class="card-header">
          <h2>{{ $t('上传截图') }}</h2>
        </div>
        <el-form class="deposit-form" label-position="top">
          <el-form-item>
            <div class="address-container">
              <div class="address-content">
                <div class="avatar-section">
                  <el-upload
                    :show-file-list="false"
                    accept=".png,.jpg"
                    :http-request="uploadImg"
                  >
                    <div class="avatar-wrapper">
                      <img
                        v-if="filePath"
                        :src="filePath"
                        class="avatar"
                        alt=""
                      >
                      <i v-else class="fas fa-camera"></i>
                      <div class="avatar-overlay">
                        <i class="fas fa-camera"></i>
                      </div>
                    </div>
                  </el-upload>
                </div>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>

      <!-- 充值说明 -->
      <div class="notice-card">
        <h3>{{ $t('充值说明') }}</h3>
        <ul>
          <li>{{ $t('请务必确认选择正确的充值网络，错误的网络可能导致资产丢失') }}</li>
          <li>{{ $t('充值金额没有最低限制，到账时间取决于区块网络确认速度') }}</li>
          <li>{{ $t('充值完成后，一般需要等待 2-3 个区块确认后到账') }}</li>
          <li>{{ $t('如遇到问题，请提供交易哈希联系客服处理') }}</li>
        </ul>
      </div>
      <el-button :loading="loading" class="recharge-btn" type="primary" size="large" @click="handleRecharge">{{ $t('充值') }}</el-button>
    </div>

    <Footer />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import ResponsiveNav from '@/components/ResponsiveNav.vue'
import Footer from '@/components/Footer.vue'
import {ApiConfig, ApiUploadFile} from "@/api/common/index.js";
import {ApiRechargeSubmit} from "@/api/assets.js";
import {useI18n} from "vue-i18n";
const { t } = useI18n();


// 加密货币列表
const cryptoList = ref([])

// 状态变量
const selectedCrypto = ref('')
const depositAddress = ref('')
const depositNum = ref('')
const filePath = ref('')
const loading = ref(false)

const selectCrypto = (item) => {
  console.log(item,'item');
  
  selectedCrypto.value = item.coin
  depositAddress.value = item.address
}
const copyAddress = (address) => {
  navigator.clipboard.writeText(address)
  ElMessage.success(t('复制成功'))
}
const handleRecharge = () => {
  if (!selectedCrypto.value) {
    ElMessage.error(t('请选择充值币种'))
    return
  }
  if (!depositAddress.value) {
    ElMessage.error(t('请输入充值地址'))
    return
  }
  if (!depositNum.value) {
    ElMessage.error(t('请输入充值数量'))
    return
  }
  if (Number(depositNum.value) <= 0) {
    ElMessage.error(t('充值数量必须大于0'))
    return
  }
  if (!/^[0-9]+(\.[0-9]{1,2})?$/.test(depositNum.value)) {
    ElMessage.error(t('充值数量必须为数字或小数'))
    return
  }
  if (!filePath.value) {
    ElMessage.error(t('请上传截图'))
    return
  }
  loading.value = true
  ApiRechargeSubmit({
    coin: selectedCrypto.value,
    rechargeMoney: depositNum.value,
    filePath: filePath.value
  }).then(res => {
    ElMessage.success(res.msg || t('充值成功'))
    selectedCrypto.value = ''
    depositNum.value = ''
  }).finally(() => {
    loading.value = false
  })
}

const uploadImg = (options) => {
  const formData = new FormData()
  formData.append('file', options.file)
  ApiUploadFile(formData).then(res => {
    filePath.value = res.data
  })
}

onMounted(() => {
  ApiConfig({
    key: 'RATE_SETTING'
  }).then(res => {
    cryptoList.value = res.data.filter(item => item.type === 2)
  })
})
</script>

<style lang="scss" scoped>
@use './styles/recharge.scss' as *;
.card-header{
  margin-bottom: 20px;
}
.recharge-btn{
  width: 100%;
  margin-top: 20px;
}
.avatar-section {
  display: flex;
  gap: 24px;

  .avatar-wrapper {
    width: 120px;
    height: 120px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed #ddd;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    i {
      font-size: 48px;
      color: #ccc;
    }

    .avatar-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.2s;

      i {
        color: white;
        font-size: 24px;
      }
    }

    &:hover .avatar-overlay {
      opacity: 1;
      cursor: pointer;
    }
  }

  .avatar-info {
    flex: 1;

    h3 {
      font-size: 16px;
      color: #111;
      margin-bottom: 8px;
    }

    p {
      color: #666;
      font-size: 14px;
      margin-bottom: 16px;
    }
  }
}
</style>
